<template>
	<view class="content">
		<view class="head">
		</view>
		<view class="head1">
			<image class="bg-set1" :src="bgimage"></image>
			<view class="meng1"></view>
		</view>
		<view class="info">
			<view class="info-left">
				<image class="head-image" src=""></image>
			</view>
			<view class="info-right">
				<view class="title">
					{{name}}
				</view>
				<view class="info-detail">
					{{info}}
				</view>
			</view>
		</view>
		<view class="items">
			<view class="item" v-for="(item,index) in lists">
				<view class="img-wrap">
					<image src="../../../static/home/menpai/shaolin.png" class="item-image"></image>

				</view>
				<view class="item-add">
					<text class="item-text">
						{{item.values}}
						<image class="add-img" src="../../../static/home/jineng/jineng-add.png" @click="addJi(index)"></image>
					</text>
				</view>
			</view>
		</view>
		<view class="num">
			<view class="num-left">
				<text class="num-left-text">等级：</text>
				<input type="number" placeholder="0" v-model="level" class="level-input" @input="input" />
			</view>
			<view class="num-right">
				<text>可分配技能点 {{all}}</text>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-left">
				<view class="reset-btn btn" :style="resetcolor" @click="resetAll">重置潜能</view>
			</view>
			<view class="bottom-right">
				<view class="save-btn btn" @click="save">保存分配</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "天王·刀天王",
				src: "../../../static/home/peizhuang/select.png",
				bgimage: "../../../static/home/menpai/emei.png",
				info: "活动期间，玩家可以通过礼包发放地址领取激活码。开服后大侠可在各大主城，新手村npc“龙儿”处输入激活码，即可兑换单思南新手礼包（自兑换起时限7天），开启礼。",
				all: 0,
				allB: 0,
				resetcolor:"color:#728C98",
				level:0,
				lists: [{
						src: "",
						values: 0,
						skilltype:1
					},
					{
						src: "",
						values: 0,
						skilltype:0
					},
					{
						src: "",
						values: 0,
						skilltype:0
					},
					{
						src: "",
						values: 0,
						skilltype:0
					},
					{
						src: "",
						values: 0,
						skilltype:0
					},
					{
						src: "",
						values: 0,
						skilltype:0
					},
					{
						src: "",
						values: 0,
						skilltype:0
					},
					{
						src: "",
						values: 0,
						skilltype:0
					},
					{
						src: "",
						values: 0,
						skilltype:0
					},
					{
						src: "",
						values: 0,
						skilltype:0
					},
					{
						src: "",
						values: 0,
						skilltype:0
					},
					{
						src: "",
						values: 0,
						skilltype:0
					}
				],
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: function(res) {
					// console.log(res.pixelRatio);
					// console.log(res.windowWidth);
					// console.log(res.windowHeight);
					// let lef = (res.windowWidth * (620 / 750)) / 6
					// this.aheight = "margin-left: " + lef + "rpx;";
					// console.log(this.aheight)
					// console.log(res.language);
					// console.log(res.version);
					// console.log(res.platform);
				}
			});

		},
		methods: {
			addJi(index)
			{
				if(this.all > 0)
				{
					console.log(index)
					console.log(this.lists[index].values)
					this.resetcolor = "color:#FFFFFF"
					if(this.lists[index].skilltype===0){
						if(this.lists[index].values<20)
						{
							this.lists[index].values = this.lists[index].values + 1
							this.all = this.all - 1
						}
			
					}else
					{
						if(this.lists[index].values<30)
						{
							this.lists[index].values = this.lists[index].values + 1
							this.all = this.all - 1
						}
					}
				}
				
			},
			resetAll()
			{
				this.level = 0
				this.resetcolor="color:#728C98"
				this.lists = this.$options.data().lists
				this.all = this.allB
			},
			input(e) {
				console.log(e.target.value)
				this.resetcolor="color:#728C98"
				var value = e.target.value;
				if (Number(value) < 0) {
					this.level = 0;
				}
				else{
					this.lists = this.$options.data().lists
					this.level = e.target.value
					this.all = this.level-1
				}
			}
		}
	}
</script>

<style scoped>
	
	
	.flex-item {
			width: 33.3%;
			height: 200rpx;
			text-align: center;
			line-height: 200rpx;
		}
		.flex-item-V {
			width: 100%;
			height: 150rpx;
			text-align: center;
			line-height: 150rpx;
		}
		.text {
			margin: 15rpx 10rpx;
			padding: 0 20rpx;
			background-color: #ebebeb;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			color: #777;
			font-size: 26rpx;
		}
	page {
		background-color: #1F282C;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 60rpx;
	}

	.bottom {
		width: 100%;
	}

	.bg-set {
		position: fixed;
		width: 100%;
		height: 326rpx;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.head {
		display: flex;
		float: left;
		/* z-index: 10000; */
		width: 100%;
		height: 326rpx;
	}

	.meng {
		position: fixed;
		margin-top: 68rpx;
		width: 750rpx;
		height: 173rpx;
		background: linear-gradient(0deg, rgba(78, 100, 110, 0.8), rgba(78, 100, 110, 0.01));
	}
	
	.head1 {
	/* 		display: flex; */
			float: left;
			z-index: 10000;
			width: 100%;
			height: 326rpx;
			margin-top: -410rpx;
			background-color: #1F282C;
		}
		.bg-set1 {
			/* position: fixed; */
			width: 100%;
			height: 326rpx;
			top: 0;
			left: 0;
			z-index: -1;
		}
		.meng1 {
			/* position: fixed; */
			/* margin-top: 68rpx; */
			margin-top: -180rpx;
			width: 750rpx;
			height: 173rpx;
			background: linear-gradient(0deg, rgba(78, 100, 110, 0.8), rgba(78, 100, 110, 0.01));
		}

	.info {
		display: flex;
		float: left;
		z-index: 10001;
		width: 92%;
		height: 200rpx;
		margin-top: -100rpx;
		background-color: #405C69;
		border-radius: 10px;
	}

	.head-image {
		height: 100%;
	}

	.info .info-left {
		width: 60rpx;
		height: 100%;
	}

	.info .info-right {
		overflow: hidden;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
	}

	.info .info-right .title {
		margin-top: 16rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 400;
	}

	.info .info-right .info-detail {
		margin-top: 16rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		color: #A0AAAF;
		font-size: 24rpx;
		line-break: 3;

	}

	.items {
		background-color: #1F282C;
		display: flex;
		width: 96%;
		flex-wrap: wrap;
		padding-top: 10rpx;
		padding-bottom: 50rpx;
	}

	.item {
		margin-top: 20rpx;
		width: 20%;
		height: 172rpx;
	}

	.img-wrap {
		margin: 0 auto;
		width: 124rpx;
		height: 124rpx;
		border: 2rpx solid #897F62;
	}

	.item-image {
		width: 100%;
		height: 100%;
		
	}

	.item-add {
		margin: 0 auto;
		width: 124rpx;
		height: 52rpx;
		border: 2rpx solid #897F62;
		line-height: 52rpx;
	}

	.item-text {
		margin-left: 10rpx;
		width: 100%;
		height: 100%;
		line-height: 52rpx;
		color: #FFFFFF;
	}

	.add-img {
		float: right;
		margin-top: 5rpx;
		margin-right: 5rpx;
		width: 44rpx;
		height: 44rpx;
	}
	.num{
		width: 90%;
		text-align: center;
		color: #728C98;
		font-size: 20rpx;
		margin-right: 25rpx;
		margin-top: 64rpx;
		padding-bottom: 30rpx;
		border-bottom:solid 1px #405C69
	}
	.num-left {
		float: left;
		width: 50%;
		height: 100%;
	}
	
	.num-right {
		float: right;
		width: 50%;
		height: 100%;
		text-align: right;
	}
	
	.num-left-text {
		margin-left: 20rpx;
		float: left;
		line-height: 40rpx;
	}
	
	.level-input {
		width: 87rpx;
		height: 40rpx;
		background: #405C69;
		border-radius: 4rpx;
		text-indent: 0rpx;
		font-size: 20rpx;
		color: #FFFFFF;
	}
	
	.input-placeholder {
		color: #FFFFFF;
	}
	.bottom{
		margin-top: 100rpx;
		width: 100%;
		display: flex;
	}
	
	.bottom-left{
		width: 50%;
		/* background-color: #0000FF; */
		
	}
	.bottom-right{
		/* background-color: #008000; */
		width: 50%;
	}
	.btn{
		text-align: center;
		width: 220rpx;
		height: 70rpx;
		border: 2rpx solid #728C98;
		border-radius: 35rpx;
		line-height: 70rpx;
	}
	.reset-btn{
		float: right;
		margin-right: 30rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #728C98;
	}
	.save-btn{
		float: left;
		margin-left: 30rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
</style>
